<template>
  <view class="topic-page">
    <!-- 搜索+Tab导航 -->
    <view class="topic-header">
      <input 
        class="topic-search" 
        placeholder="搜索话题" 
        v-model="searchKey" 
        @input="searchTopic"
        @confirm="searchTopic"
      />
      <view class="topic-tabs">
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'track' }" 
          @click="switchTab('track')"
        >
          追踪
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'topic' }" 
          @click="switchTab('topic')"
        >
          话题榜
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'opinion' }" 
          @click="switchTab('opinion')"
        >
          观点榜
        </view>
      </view>
    </view>

    <!-- 话题列表（动态加载） -->
    <view class="topic-list">
      <!-- 无数据提示 -->
      <view class="empty-tip" v-if="currentTopicList.length === 0">
        暂无相关话题~
      </view>
      
      <view 
        class="topic-item" 
        v-for="(item, index) in currentTopicList" 
        :key="item.id" 
        @click="toTopicDetail(item.id)"
      >
        <!-- 热点标识 -->
        <view class="hot-tag" v-if="item.isHot">热点</view>
        <text class="topic-title">#{{ item.title }}#</text>
        <text class="topic-content">{{ item.content }}</text>
        <text class="topic-meta">{{ item.viewCount }}观点 · {{ item.author }}</text>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" @click="loadMore" v-if="hasMore">加载更多</view>
      <view class="load-more" v-else-if="filteredByTab.length > 0">没有更多内容了</view>
    </view>

    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// Tab切换
const currentTab = ref("topic");
// 搜索关键词
const searchKey = ref("");
// 模拟话题数据（分页）
const totalTopicList = ref([
  { 
    id: 1, 
    title: "曼联客场不败场次在英超排名第二", 
    content: "曼联客场对阵阿斯顿维拉...最终红魔以3-1战胜对手。", 
    viewCount: 119, 
    author: "体育头条", 
    isHot: true,
    tab: "topic"
  },
  { 
    id: 2, 
    title: "司机为救婴儿闯红灯", 
    content: "网红司机为救婴儿连闯3红灯，警察查实后取消处罚。", 
    viewCount: 1419, 
    author: "社会新闻", 
    isHot: true,
    tab: "topic"
  },
  { 
    id: 3, 
    title: "2025年经济走势预测", 
    content: "专家分析2025年全球经济将呈现温和复苏态势...", 
    viewCount: 892, 
    author: "财经日报", 
    isHot: false,
    tab: "opinion"
  },
  { 
    id: 4, 
    title: "新能源汽车销量再创新高", 
    content: "2025年第一季度新能源汽车销量同比增长35%...", 
    viewCount: 567, 
    author: "科技前沿", 
    isHot: false,
    tab: "opinion"
  },
  { 
    id: 5, 
    title: "我关注的话题1", 
    content: "这是我正在追踪的话题内容...", 
    viewCount: 123, 
    author: "个人关注", 
    isHot: false,
    tab: "track"
  }
]);

// 当前显示的话题列表（分页）
const currentTopicList = ref([]);
const pageSize = 2;
const hasMore = ref(true);

// 计算当前Tab对应的话题
const filteredByTab = computed(() => {
  let filtered = totalTopicList.value.filter(item => item.tab === currentTab.value);
  
  // 搜索过滤
  if (searchKey.value) {
    const keyword = searchKey.value.trim().toLowerCase();
    filtered = filtered.filter(item => 
      item.title.toLowerCase().includes(keyword) || 
      item.content.toLowerCase().includes(keyword)
    );
  }
  
  return filtered;
});

// 监听Tab切换和搜索关键词变化，重置分页
watch([() => currentTab.value, () => searchKey.value], () => {
  resetPage();
}, { immediate: true });

// 重置分页
const resetPage = () => {
  const filtered = filteredByTab.value;
  currentTopicList.value = filtered.slice(0, pageSize);
  hasMore.value = filtered.length > pageSize;
};

// 搜索话题
const searchTopic = () => {
  resetPage();
};

// 切换Tab
const switchTab = (tab) => {
  currentTab.value = tab;
};

// 加载更多
const loadMore = () => {
  const filtered = filteredByTab.value;
  const nextPage = currentTopicList.value.length + pageSize;
  const newItems = filtered.slice(currentTopicList.value.length, nextPage);
  
  currentTopicList.value = [...currentTopicList.value, ...newItems];
  hasMore.value = nextPage < filtered.length;
};

// 跳转到话题详情（修正路径一致性）
const toTopicDetail = (id) => {
  // 确保跳转路径与实际文件路径一致
  // 如果实际文件是topic-content.vue，这里应该改为：
  // uni.navigateTo({ url: `/pages/topic-content/topic-content?id=${id}` });
  
  // 如果实际文件是topic-detail.vue，保持当前路径
  uni.navigateTo({ url: `/pages/topic-detail/topic-detail?id=${id}` });
};
</script>

<style scoped>
.topic-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 60px;
  background: #f5f5f5;
}
.topic-header {
  background: #fff;
  border-radius: 8rpx;
  padding: 10rpx;
  margin-bottom: 10rpx;
}
.topic-search {
  width: 100%;
  height: 50rpx;
  border: 1rpx solid #eee;
  border-radius: 4rpx;
  padding: 0 10rpx;
  margin-bottom: 10rpx;
  font-size: 26rpx;
}
.topic-tabs {
  display: flex;
  justify-content: space-around;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  font-size: 28rpx;
  transition: color 0.2s;
}
.tab-item.active {
  color: #ff3333;
  border-bottom: 2rpx solid #ff3333;
}
.topic-list {
  background: #fff;
  border-radius: 8rpx;
  padding: 10rpx;
}
.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 26rpx;
}
.topic-item {
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eee;
  transition: background-color 0.2s;
}
.topic-item:last-child {
  border-bottom: none;
}
.topic-item:active {
  background-color: #f5f5f5;
}
.hot-tag {
  color: #fff;
  background: #ff3333;
  font-size: 22rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-bottom: 5rpx;
  display: inline-block;
}
.topic-title {
  color: #ff3333;
  font-size: 28rpx;
  margin-bottom: 5rpx;
  font-weight: 500;
}
.topic-content {
  font-size: 26rpx;
  line-height: 36rpx;
  margin-bottom: 5rpx;
  color: #333;
}
.topic-meta {
  font-size: 24rpx;
  color: #999;
}
.load-more {
  text-align: center;
  padding: 15rpx 0;
  color: #666;
  font-size: 26rpx;
}
</style>